<template>
  <el-pagination
    @size-change="handleSizeChange" @current-change="currentChange" :current-page="pageNum" :page-sizes="pageSizes"
    :page-size="pageSize" :layout="layout" :total="total">
  </el-pagination>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface IPagination {
  pageSizes?: any[], // 可选择的每页数量
  pageSize?: number, // 初始每页数量 父子双向绑定
  pageNum?: number, // 起始页 父子双向绑定
  total?: number, // 总条数
  layout?: string
}

const props = withDefaults(defineProps<IPagination>(), {
  pageNum: 1,
  pageSizes: () => [20, 40, 60, 100],
  pageSize: 20,
  total: 0,
  layout: 'total, sizes, prev, pager, next, jumper'
})

const pagenum = ref(props.pageNum)
const emit = defineEmits(['change', 'update:pageNum', 'update:pageSize'])

const currentChange = (value) => {
  emit('update:pageNum', value) // 双向绑定pageNum
  emit('change') // 触发加载事件
}

const handleSizeChange = (value) => {
  emit('update:pageSize', value) // 双向绑定pageNum
  emit('change') // 触发加载事件
}
</script>

<style scoped lang="less">
.el-pagination {
  justify-content: flex-end;
}

/** useage
<pagination :total="pages.total" v-model:pageNum="pages.pageNum" v-model:pageSize="pages
      .pageSize" @change="query"></pagination>
注意，pageNum要使用v-model
*/
</style>
